<script lang='ts'>
import { computed, defineComponent, ref } from "vue";
import { Edit } from "@element-plus/icons";
import Bus from "@/views/yizhangtu/func/Bus";
import { useStore } from "vuex";
interface detailInfo {
  proNum: string;
  proName: string;
  prodUnit: string;
  prodApplyArea: number;
  proAddArea: number;
}
export default defineComponent({
  name: "ProjectDetail",
  components: { Edit },
  setup() {
    const store = useStore();
    const proDetailInfo = computed(() => {            
      return store.getters["prodetail/getprodetail"];
    });
    return {
      proDetailInfo,
    };
  },
});
</script>

<template>
  <div class="projectdetail-page-wrap">
    <!-- 操作栏 -->
    <div class="status-operate">
      <el-icon :size="24" color="#aaa"><Edit /></el-icon>
      <h2>批</h2>
    </div>

    <!-- 描述列表 -->
    <div class="data-list">
      <el-descriptions column="1">
        <el-descriptions-item label-class-name="desc-label" label="项目名称">
          {{ proDetailInfo.proName }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="desc-label" label="批准文号"
          > {{ proDetailInfo.proNum }}</el-descriptions-item
        >
        <el-descriptions-item label-class-name="desc-label" label="项目类型"
          > {{ proDetailInfo.prodUnit }}</el-descriptions-item
        >
        <el-descriptions-item
          label-class-name="desc-label"
          label="批准总面积"
        >
           {{ proDetailInfo.prodApplyArea }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="desc-label"
          label="批准国有总面积"
          >{{ proDetailInfo.proAddArea }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="operate-btn">
      <el-button type="danger" round>分析</el-button>
    </div>
  </div>
</template>

<style lang='less' scoped>
.projectdetail-page-wrap {
  .status-operate {
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .data-list {
    padding: 10px;
  }

  .operate-btn {
    display: flex;
    justify-content: end;
    padding: 10px;
  }
}
</style>

<style>
.desc-label {
  color: #409eff;
}
</style>